/* eslint-disable react/no-array-index-key */
import styles from './index.module.less'
import NavBar from '@/components/Global/NavBar'
import classNames from 'classnames'
import { history } from 'umi'
import { useEffect, useState } from 'react'
import { fetchClassDetail } from '../api'
import { SkeletonParagraphWrap, SkeletonTitleWrap } from '@/components/Common/Skeleton'
import type { ClassDetail as IClassDetail, DispatchTeacher } from './interface'

export const TeacherInfoItem = (props: DispatchTeacher) => {
    const onCall = () => {
        if (!props.phone) return
        window.open(`tel:${props.phone}`, '_self')
    }

    return (
        <div className={styles.teacherInfo_content_item}>
            <div
                onClick={onCall}
                className={classNames({
                    [styles.teacherInfo_content_item_callSign]: props.phone,
                    [styles.teacherInfo_content_item_callError]: !props.phone,
                })}
            >
                <div className="call_icon" />
            </div>
            <div className={styles.teacherInfo_content_item_name}>{props.realname}</div>
            <div className={styles.teacherInfo_content_item_info}>
                <div className={styles.category}>
                    {props.category_name.map((item, index) => (
                        <span key={index} className={styles.category_item}>
                            {item}
                        </span>
                    ))}
                </div>
                <div>{`${props.sex || '-'}·${props.region || '-'}`}</div>
                <div>工作单位：{props.company || '-'}</div>
            </div>
        </div>
    )
}

export const ClassDetail = () => {
    const historyQuery = history.location.query as { id: string }

    const id = Number(historyQuery.id)

    const [loading, setLoading] = useState<boolean>(true)
    const [detail, setDetail] = useState<IClassDetail>()

    useEffect(() => {
        const initData = async () => {
            try {
                setLoading(true)
                const { data } = await fetchClassDetail(id)
                setDetail(data)
            } finally {
                setLoading(false)
            }
        }
        initData()
    }, [id])

    const ClassInfoItem = (props: { label: string; value?: string }) => {
        return (
            <div className={styles.classInfo_content_item}>
                <div>{props.label}</div>
                <SkeletonTitleWrap animated loading={loading} className={styles.customSkeleton}>
                    <span>{props.value || '-'}</span>
                </SkeletonTitleWrap>
            </div>
        )
    }

    return (
        <div>
            <NavBar title={'班级详情'} />
            <div className={styles.page}>
                <div className={styles.background} />

                <div className={styles.content}>
                    <div className={styles.classInfo}>
                        <div className={styles.classInfo_sign} />
                        <div className={styles.classInfo_title}>班级详情</div>
                        <div className={styles.classInfo_content}>
                            <ClassInfoItem label="师资班类别" value={detail?.name} />
                            <ClassInfoItem
                                label="培训时间"
                                value={`${detail?.begin_date} 至 ${detail?.end_date}`}
                            />
                            <ClassInfoItem label="报到时间" value={detail?.report_date} />
                            <ClassInfoItem label="培训地点" value={detail?.region} />
                            <ClassInfoItem label="主办单位" value={detail?.company_name} />
                            <ClassInfoItem label="单位联系人" value={detail?.company_realname} />
                            <ClassInfoItem label="联系电话" value={detail?.company_phone} />
                            <ClassInfoItem label="手机号" value={detail?.company_phone} />
                        </div>
                    </div>

                    <div className={styles.teacherInfo}>
                        <div className={styles.teacherInfo_sign} />
                        <div className={styles.teacherInfo_title}>培训师信息</div>
                        <div className={styles.teacherInfo_content}>
                            <SkeletonParagraphWrap animated lineCount={2} loading={loading}>
                                {detail?.teacher_dispatch.map(item => {
                                    return <TeacherInfoItem key={item.id} {...item} />
                                })}
                            </SkeletonParagraphWrap>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ClassDetail
